<template>
  <div style="height: 100vh;">
    <el-menu style="height: 100vh;" active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
      :router="true" default-active="1" text-color="#fff" @open="handleOpen" @close="handleClose">

      <el-menu-item index="/add_form_template">
        <div class="navItem">添加集合模板</div>
      </el-menu-item>
      <el-menu-item index="/list_form_template">
        <div class="navItem">集合模板列表</div>
      </el-menu-item>
      <el-menu-item index="/add_coll_data">
        <div class="navItem">添加数据</div>
      </el-menu-item>
      <el-menu-item index="/coll_list">
        <div class="navItem">集合列表</div>
      </el-menu-item>

    </el-menu>
  </div>
</template>

<script lang="ts" setup>

const handleOpen = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath)
}

// const pageChange = () {

// }
</script>


<style>
.navItem {
  text-align: center;
  width: 100%;
}

* {
  padding: 0;
}
</style>